<template>
  <a-modal
    :visible="visible"
    title="修改头像"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :width="800"
    @cancel="cancelHandel"
  >
    <a-row>
      <a-col :xs="24" :md="12">
        <div style="height:300px;margin-bottom:20px;">
          <vue-cropper
            ref="cropper"
            :img="options.img"
            :info="true"
            :full="false"
            :canScale="false"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :fixedBox="options.fixedBox"
            :centerBox="true"
            @realTime="realTime"
          ></vue-cropper>
        </div>

        <div style="height:80px;">
          <div class="icon-wrapper">
            <a-icon type="minus" @click="subScale" />
            <a-slider v-model="scale" :step="0.1" :min="1" :max="2" @change="setAvatarDelay" />
            <a-icon type="plus" @click="addScale" />
          </div>
          <div class="icon-wrapper">
            <a-icon type="undo" @click="subRotate" />
            <a-slider :disabled="true" v-model="rotate" :step="90" :min="0" :max="360" @change="setAvatarDelay" />
            <a-icon type="redo" @click="addRotate" />
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <div class="avatar-upload-preview">
          <img :src="previews.url" :style="previews.img" />
        </div>
      </a-col>
    </a-row>
    <template slot="footer">
      <a-button key="back" @click="cancelHandel">取消</a-button>
      <a-button key="submit" type="primary" :loading="confirmLoading" @click="okHandel">保存</a-button>
    </template>
  </a-modal>
</template>
<script>
import { VueCropper } from 'vue-cropper'

export default {
  name: 'cropperModal',
  components: {
    VueCropper
  },
  data () {
    return {
      visible: false,
      img: null,
      confirmLoading: false,
      scale: 0,
      rotate: 0,
      options: {
        // img: window._CONFIG.imgDomainURL + '/' + Vue.ls.get(USER_INFO).avatar, // 裁剪图片的地址
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true // 固定截图框大小 不允许改变
      },
      previews: {},
      url: {
        upload: '/sys/common/saveToImgByStr'
      }
    }
  },
  methods: {
    addScale () {
      if (this.scale < 2) {
        this.scale += 0.1
        this.setAvatarDelay()
      }
    },
    addRotate () {
      if (this.scale === 360) return
      this.rotate += 1
      console.log(this.$refs.cropper)
      this.setAvatarDelayRight()
    },
    subScale () {
      if (this.scale === 1) return
      this.scale -= 0.1
      this.setAvatarDelay()
    },
    subRotate () {
      if (this.rotate === 0) return
      this.rotate -= 1
      this.setAvatarDelayLeft()
    },
    // 缩放
    setAvatarDelay () {
      this.changeScale(this.bigSize)
    },
    setAvatarDelayChange () {

    },
    setAvatarDelayRight () {
      this.$refs.cropper.rotateRight()
    },
    setAvatarDelayLeft () {
      this.$refs.cropper.rotateLeft()
    },
    edit (record) {
      console.log(record)
      const { options } = this
      this.visible = true
      this.options = Object.assign({}, options, record)
    },
    cancelHandel () {
      this.options = {
        img: './avatar2.jpg',
        autoCrop: true,
        autoCropWidth: 200,
        autoCropHeight: 200,
        fixedBox: true
      }
      this.confirmLoading = false
      this.visible = false
    },
    okHandel () {
      const that = this
      that.confirmLoading = true
      // 获取截图的base64 数据
      this.$refs.cropper.getCropData((data) => {
        // var file = {
        //   imgByte: data
        // }
        // axios({
        //   url: that.url.upload,
        //   method: 'post',
        //   data: file,
        //   headers: {
        //     'Content-Type': 'application/json'
        //   }
        // }).then((res) => {
        //   that.$emit('ok', res.message)
        //   that.cancelHandel()
        // })
      })
    },
    // 移动框的事件
    realTime (data) {
      this.previews = data
    },
    // 图片缩放
    changeScale (num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    // 向左旋转
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    // 向右旋转
    rotateRight () {
      this.$refs.cropper.rotateRight()
    }
  }
}
</script>

<style lang="less" scoped>
.avatar-upload-preview {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;

  img {
    width: 100%;
    height: 50%;
  }
}
.icon-wrapper {
  position: relative;
  padding: 0px 30px;
}

.icon-wrapper .anticon {
  position: absolute;
  top: -2px;
  width: 16px;
  height: 16px;
  line-height: 1;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.25);
}

.icon-wrapper .anticon:first-child {
  left: 0;
}

.icon-wrapper .anticon:last-child {
  right: 0;
}
.ant-card-body {
    padding: 20px;
}
</style>
